<template>
  <div class="container">
    <quill-editor
      ref="editor"
      v-model="content"
      :options="editorOption"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @ready="onEditorReady($event)"
    />
    <div><h1>预览</h1></div>
    <el-button @click="tes"> test</el-button>
    <div v-html="precontent">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      precontent:'',
      content: "<p>I am Example</p>",
      editorOption: {
        // Some Quill options...
        theme: "snow",
      }
    };
  },
  mounted() {
    console.log(
      "App inited, the Quill instance object is:",
      this.$refs.editor.quill
    );
    setTimeout(() => {
      this.content = "I was changed!";
    }, 3000);
  },
  methods: {
    onEditorBlur(editor) {
      // console.log("editor blur!", editor);
    },
    onEditorFocus(editor) {
      // console.log("editor focus!", editor);
    },
    onEditorReady(editor) {
      // console.log("editor ready!", editor);
    },
    tes(){
      this.precontent = this.$refs.editor._content
      
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  width: 60%;
  margin: 0 auto;
  padding: 50px 0;
  .quill-editor {
    min-height: 200px;
    max-height: 400px;
    overflow-y: auto;
  }
}
</style>